<template>
  <ul class="filltext-container">
    <li>home</li>
    <li>link</li>
    <li>peace</li>
    <li>love</li>
  </ul>
</template>

<style lang="scss" scoped>
.filltext-container {
  $fillColor:#00ffff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #1e1a23;
  li {
    position: relative;
    display: block;
    font-size: 2.5em;
    font-weight: 700;
    margin-top: 10px;
    -webkit-text-stroke: 2px $fillColor;
    color:transparent;
    text-transform: uppercase;
    background: linear-gradient(90deg, $fillColor 0%, $fillColor 100%);
    background-size: 0;
    background-position: left;
    background-repeat: no-repeat;
    transition: 0.5s linear;
    background-clip: text;
    &:hover {
      background-size: 100%;
    }
  }
}
</style>

